<template>
  <div class="home-container">
    <!-- 顶部导航栏 -->
    

    <!-- 主要内容区域 -->
    <div class="main-content">
      <!-- 轮播图部分 -->
      <a-carousel class="carousel" autoplay>
        <div class="carousel-item" v-for="slide in carouselSlides" :key="slide.title">
          <div class="carousel-content" :style="{ backgroundImage: `url(${slide.image})` }">
            <div class="carousel-overlay">
              <h3>{{ slide.title }}</h3>
              <p>{{ slide.description }}</p>
              <a-button type="primary" size="large" class="carousel-btn">了解更多</a-button>
            </div>
          </div>
        </div>
      </a-carousel>

      <!-- 产品特点部分 -->
      <div class="features-section">
        <h2 class="section-title">我们的优势</h2>
        <div class="features-grid">
          <div class="feature-item">
            <CloudOutlined class="feature-icon" />
            <h3>云端部署</h3>
            <p>灵活的云端解决方案，随时随地访问</p>
          </div>
          <div class="feature-item">
            <SafetyCertificateOutlined class="feature-icon" />
            <h3>安全可靠</h3>
            <p>多重安全防护，数据加密存储</p>
          </div>
          <div class="feature-item">
            <ThunderboltOutlined class="feature-icon" />
            <h3>高效性能</h3>
            <p>优化的性能表现，快速响应需求</p>
          </div>
          <div class="feature-item">
            <CustomerServiceOutlined class="feature-icon" />
            <h3>专业服务</h3>
            <p>7*24小时技术支持，专业团队保障</p>
          </div>
        </div>
      </div>

      <!-- 解决方案部分 -->
      <div class="solutions-section">
        <h2 class="section-title">解决方案</h2>
        <a-row :gutter="[24, 24]">
          <a-col :span="8" v-for="solution in solutions" :key="solution.title">
            <a-card hoverable>
              <template #cover>
                <img :alt="solution.title" :src="solution.image" />
              </template>
              <a-card-meta :title="solution.title">
                <template #description>{{ solution.description }}</template>
              </a-card-meta>
            </a-card>
          </a-col>
        </a-row>
      </div>
    </div>

    
  </div>
</template>

<script setup>
import { ref ,computed,onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { useUserStore } from '@/stores/user';
import {
  SafetyCertificateOutlined,
  ThunderboltOutlined,
  CustomerServiceOutlined,
} from '@ant-design/icons-vue';

const router = useRouter();
const userStore = useUserStore();
const selectedKeys = ref(['home']);

const userInfo = computed(()=>{
  return userStore.user
})


onMounted(() => {
  console.log('app moutend',)
  if (!userInfo?.value?.username) {
    router.push('/login')
  }
})
// 模拟解决方案数据
const solutions = [
  {
    title: '企业数字化转型',
    description: '帮助企业实现数字化转型，提升运营效率',
    image: 'https://images.unsplash.com/photo-1451187580459-43490279c0fa?auto=format&fit=crop&w=300&q=80',
  },
  {
    title: '智能数据分析',
    description: '深度数据分析，助力企业决策',
    image: 'https://images.unsplash.com/photo-1451187580459-43490279c0fa?auto=format&fit=crop&w=300&q=80',
  },
  {
    title: '云服务解决方案',
    description: '安全可靠的云端部署方案',
    image: 'https://images.unsplash.com/photo-1451187580459-43490279c0fa?auto=format&fit=crop&w=300&q=80',
  },
];

// 添加轮播图数据
const carouselSlides = [
  {
    title: '创新科技 引领未来',
    description: '为企业提供领先的技术解决方案',
    image: 'https://images.unsplash.com/photo-1451187580459-43490279c0fa?auto=format&fit=crop&w=1920&q=80'
  },
  {
    title: '专业服务 值得信赖',
    description: '十年行业经验，服务上千家企业',
    image: 'https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?auto=format&fit=crop&w=1920&q=80'
  },
  {
    title: '全球视野 本地服务',
    description: '布局全球市场，深耕本地需求',
    image: 'https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?auto=format&fit=crop&w=1920&q=80'
  }
];


</script>

<style scoped>
.home-container {
  min-height: 100vh;
}


.carousel {
  height: calc(100vh - 64px);
}

.carousel-item {
  height: calc(100vh - 64px);
  width: 100%;
}

.carousel-content {
  height: 100%;
  width: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
}

.carousel-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 0 20px;
}

.carousel-overlay h3 {
  font-size: 48px;
  margin-bottom: 24px;
  color: white;
  font-weight: bold;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.carousel-overlay p {
  font-size: 24px;
  color: white;
  opacity: 0.9;
  margin-bottom: 32px;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.carousel-btn {
  font-size: 18px;
  height: 48px;
  padding: 0 32px;
  border-radius: 24px;
}

.features-section,
.solutions-section {
  max-width: 1200px;
  margin: 60px auto;
  padding: 0 24px;
}

.section-title {
  text-align: center;
  font-size: 36px;
  margin-bottom: 48px;
  color: rgba(0, 0, 0, 0.85);
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 32px;
}

.feature-item {
  text-align: center;
  padding: 32px;
}

.feature-icon {
  font-size: 48px;
  color: #1890ff;
  margin-bottom: 24px;
}

.feature-item h3 {
  font-size: 20px;
  margin-bottom: 16px;
  color: rgba(0, 0, 0, 0.85);
}

.feature-item p {
  color: rgba(0, 0, 0, 0.45);
}

</style>
